<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="readme.css" />
        <title>Readme</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="header">
            Paint Canvas <br />
            ReadMe          
        </div>
        
        <a href="index.html" class="back"> retour</a> 
    <center>
        <div id="container">
            <div id="texte" align="left">
                <h1 align="center">Présentation du projet</h1>
                <p>Ce projet consiste à créer une interface de dessin multi participants grâce aux langages html5 et javascript.<br />
                    Il a été crée dans le cadre de l'option web 2.0 du parcours M1 Miage. <br />
                    Voici comment nous sommes parvenus à ce résultat.</p>

                <h1 align="center" text-align="justify"> Les différents fichiers utilisés</h1>
                <p>Le projet est structuré de la manière suivante:
                <ul>
                    <li><b>index.html</b>. C'est la page d'accueil du site.<br />
                        Pour pouvoir y entrer, il suffit d'entrer le pseudo de notre choix dans la fenêtre qui s'affiche.<br />
                        Vous apparaissez alors comme connecté dans la console du tchat. Pour commencer à utiliser l'application, dessinez ou bien taper du texte à l'endroit indiqué. Les autres joueurs connectés verront alors en direct ce que vous venez d'effectuer.
                    </li>
                    <li><b>paint.js</b>. C'est ici que les fonctionnalités sont développées.<br />
                        Chaque bouton possède sa propre fonction qui est créée de deux manières : Une fois pour l'affichage sur l'écran de celui qui effectue la manipulation, et une autre fois pour faire apparaitre cette modification sur l'écran des autres utilisateurs.<br/>
                        Le fonctionnement des cadres est légèrement différents car une seule méthode a été créée. Le cadre qui est affiché dépendra seulement de l'id du bouton sur lequel on clique.
                    </li>
                    <li><b>paint.css</b>. Correspond à la feuille de style qui permet de rendre le site plus attractif et plus ergonomique.                                   
                    </li>
                    <li><b>readme.html</b>. C'est la page que vous êtes en train de consulter.<br />
                        Elle donne les informations nécessaire à la bonne compréhension du sujet et de son fonctionnement interne.                    
                    </li>
                    <li><b>readMe.css</b>. Page de style de readMe.html<br/>
                        Elle reprend le style d'<i>index.html</i> afin de concerver la cohérence entre toutes les pages.

                    </li>
                     </ul>
                </p>
                <h1 align="center">Liste des différentes fonctionnalités</h1>
                <p>
                <ul>
                    <li><b>Les outils :</b> Le pinceaux, le rectangle, le trait, le cercle ainsi que la gomme<br /></li>
                    <li><b>Les décorations :</b> Trois sortes de cadres<br /></li>
                    <li><b>Les finitions</b> Epaisseur et couleur<br /></li>
                    <li><b>Le partage</b> Facebook<br /></li>
                    <li><b>Les options</b> Enregistrement ou nouveau canvas<br /></li>
                    <li><b>L'information</b> Bulle informative <br /></li>
                </ul>
                </p>
            </div>

        </div>
    </center>
</body>
</html>
